<template>
  <div
    class='currentTypes'
    style="display: flex; flex-direction: column;">

    <div align="right">
      <el-button
        v-if="type === 'add'"
        class="submit"
        @click="submitFormInline"
        size="small">确定
      </el-button>
      <el-button
        v-if="type === 'modify'"
        :disabled="disabled"
        type="primary"
        class="submit"
        @click="modify"
        size="small">{{ btnTxt }}</el-button>
      <el-button
        v-if="type === 'modify'"
        :disabled="disabled"
        type="primary"
        class="submit"
        size="small"
        @click="addChildrenNode">
        新增子类别
      </el-button>
    </div>

    <el-form
      style="width: 100%;"
      :inline="true"
      :model="formInline"
      :rules="formInlineRules"
      ref="formInline"
      class="demo-form-inline">
      <el-form-item
        prop="levelName"
        label="层级名称">
        <el-input
          v-model="formInline.levelName"
          :disabled="type === 'modify' && isDisabled"
          placeholder="层级名称"
        />
      </el-form-item>
      <el-form-item
        label="层级编码"
        prop="levelCode">
        <el-input
          v-model="formInline.levelCode"
          :disabled="type === 'modify' && isDisabled"
          placeholder="层级编码"
        />
      </el-form-item>
      <el-form-item
        label="父级"
        prop="levelCode">
        <el-input
          v-model="formInline.parentLevel"
          :disabled="type === 'modify' && isDisabled"
          placeholder="父级"
        />
      </el-form-item>
      <el-form-item
        label="是否末级"
        prop="lastLevel">
        <el-radio-group
          v-model="formInline.lastLevel"
          :disabled="type === 'modify' && isDisabled">
          <el-radio
            label="否"
          />
          <el-radio
            label="是"
          />
        </el-radio-group>
      </el-form-item>
      <br >
      <el-form-item
        label="描述">
        <el-input
          :style="{width: (currentTypeNodeWidth - 100)+'px'}"
          :rows="4"
          type="textarea"
          :disabled="type === 'modify' && isDisabled"
          v-model="formInline.desc"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'CurrentTypes',
  components: {

  },

  props: {
    type: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    currentTypeNodeWidth: {
      type: Number,
      default: 0
    }

  },
  data () {
    return {
      formInline: {
        levelName: '',
        levelCode: '',
        parentLevel: '',
        lastLevel: '否',
        desc: ''
      },
      formInlineRules: {
        levelName: [
          { required: true, message: '请输入层级名称', trigger: 'blur' }
        ],
        levelCode: [
          { required: true, message: '请输入层级编码', trigger: 'blur' }
        ],
        parentLevel: [
          { required: true, message: '请输入父级', trigger: 'blur' }
        ],
        lastLevel: [
          { required: true, message: '请选择是否末级', trigger: 'blur' }
        ]
      },
      isDisabled: true,
      btnTxt: '修改'
    }
  },
  methods: {
    verificationForm () {
      this.$refs['formInline'].validate((valid) => {
        if (valid) {
          if (this.type === 'add') this.$emit('closeAddCurrentType')
          if (this.type === 'modify') {
            this.isDisabled = true
            this.btnTxt = '修改'
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    modify () {
      if (this.btnTxt === '修改') {
        this.isDisabled = false
        this.btnTxt = '确定'
      } else {
        this.verificationForm()
      }
    },
    addChildrenNode () {
      this.$emit('addChildrenNode')
    },
    submitFormInline () {
      this.verificationForm()
    }
  }
}

</script>

<style lang="less">
@import '../../assets/var.less';

.currentTypes {
  width: 100%;
}

.submit {
  background: @themeBlue;
  border: 0;
  color: #fff;
  margin-bottom: 15px;
  margin-left: 0;
  border-radius: 0%;
}
</style>
